window.onload = function() {
	//首页主界面  开始
	//向左滑动界面
	var regWidth = $("#b_reg").width();
	//点击导航缩略返回登录界面
	$(".b_navImg").on("touchend", function() {
		var bol = $(this).attr("data-bol");
		if(bol == "true") {
			$("#b_wrap").animate({
				left: regWidth
			}, 300);
			$(this).attr("data-bol", "false");
		} else {
			$("#b_wrap").animate({
				left: 0
			}, 300);
			$(this).attr("data-bol", "true");
		}

	});

	touch.on($("body"), "swiperight swipeleft", function(e) {
		e.stopPropagation();
		switch(e.type) {
			case "swiperight":
				$("#b_wrap").animate({
					left: regWidth
				}, 300);
				break;
			case "swipeleft":
				$("#b_wrap").animate({
					left: 0
				}, 300);
				break;
			default:
				break;
		}

	});
	//轮播
	//轮播图片路径
	var lbImgArr = [
		"Aimg1/lb1.png",
		"Aimg1/lb2.png",
		"Aimg1/lb3.png",
		"Aimg1/lb1.png"
	];
	//循环创建创建轮播图
	for(var i = 0; i < lbImgArr.length; i++) {
		var imgEle = $("<img  src=" + lbImgArr[i] + "/>");
		$(".a_show").append(imgEle);
	};
	//循环创建小点
	for(var i = 0; i < lbImgArr.length - 1; i++) {
		var lis = $("<li></li>");
		$(".a_ball").append(lis);
	}
	//轮播图样式
	$(".a_show").css("width", $(".a_wrap").width() * $(".a_show img").length);
	$(".a_show img").css("width", $(".a_show").width() / $(".a_show img").length);
	$(".a_ball li").first().css({
		backgroundColor: "#FE786F",
		border: "none",
	})
	var index = 0;
	//轮播函数
	var changeImg = function() {
		$(".a_ball li").css({
			backgroundColor: "rgba(255,255,255,0.5)",
			border: "0.1rem solid #FFFFFF"
		});
		index++;
		$(".a_ball li").eq(index).css({
			backgroundColor: "#FE786F",
			border: "none"
		});
		$(".a_show").animate({
			left: -$(".a_wrap").width() * index + "px"
		}, 1000)
		if(index >= lbImgArr.length - 1) {
			index = 0;
			$(".a_show").animate({
				left: 0 + "px"
			}, 0)
			$(".a_ball li").eq(index).css({
				backgroundColor: "#FE786F",
				border: "none"
			});
		}
	}
	var wheel = setInterval(changeImg, 2000);

	//创建横向图标的函数
	var iconArr = ["Aimg1/img1.png",
		"Aimg1/img2.png",
		"Aimg1/img3.png",
		"Aimg1/img4.png",
		"Aimg1/img5.png",
		"Aimg1/img6.png"
	];
	var iconTitle = ["王者荣誉", "天天酷跑", "全民突击", "热邪传奇", "德玛西亚", "艾欧尼亚"];
	for(var i = 0; i < iconArr.length; i++) {
		var icon = createIcon(iconArr[i], iconTitle[i]);
		$(".b_game").append(icon);
	}
	$(".b_game").width($(".b_gameList").outerWidth() * iconArr.length);

	function createIcon(imageSrc, title) {
		return $("<li class='b_gameList'><img src=" + imageSrc + " class='b_gameImg' /><span class='b_font2'>" + title + "</span><span class='b_font3'>有<em>1</em>款礼包</span></li>")
	};

	//主要游戏部分
	//头像数组
	var heardImg = [
		"Aimg1/h_img1.png",
		"Aimg1/h_img2.png",
		"Aimg1/h_img3.png"
	];
	//主要游戏大图数组
	var mainImg = [
		"Aimg1/con1.png",
		"Aimg1/con2.png",
		"Aimg1/con3.png"
	];
	//小图数组
	var smallImg = [
		["Aimg1/s_img1.png", "Aimg1/s_img2.png"],
		["Aimg1/s_img3.png"],
		["Aimg1/s_img5.png", "Aimg1/s_img6.png"]
	];
	//游戏名数组
	var gameName = [
			"穿越火线",
			"三国演义",
			"英雄联盟"
		]
		//创建主要游戏循环
	for(var i = 0; i < mainImg.length; i++) {
		var wrap = $("<div class='b_con1'></div>");
		var main = createmainGame(heardImg[i], mainImg[i], gameName[i]);
		wrap.append(main);
		$(".b_mainGame").append(wrap);
		for(var j = 0; j < smallImg[i].length; j++) {
			var list = createGameList(smallImg[i][j]);
			$(".b_smallGame").eq(i).append(list);
		};

	};
	//创建主要游戏
	function createmainGame(h_img, c_img, name) {
		return $("<div class='b_icon'><img src=" + h_img + " class='b_iconImg' /><strong class='b_font1'>" + name + "</strong></div><div class='b_conWrap'><span class='b_intro overhidden'>6.1版本单排上分最强打野英雄</span><img src=" + c_img + " class='b_Img' /></div><ul class='b_info b_smallGame'></ul><div class='b_btnWrap'><button class='b_btn'>查看更多</button></div>")
	};
	//创建游戏列表
	function createGameList(imgSrc) {
		return $("<li class='b_infoList'><img src=" + imgSrc + " class='b_infoImg' /><span class='b_font2 overhidden'>《英雄联盟》春节猴哥皮肤礼包</span></li>")
	}

	//循环追加视频秀区域
	//视频秀区域的图片路径数组
	var videoImg = [
		"Aimg1/video1.png",
		"Aimg1/video2.png",
		"Aimg1/video3.png",
		"Aimg1/video4.png",
		"Aimg1/video1.png",
		"Aimg1/video2.png",
		"Aimg1/video3.png"
	];
	//for循环追加
	for(var i = 0; i < videoImg.length; i++) {
		var list;
		var ele = createGift(videoImg[i]);
		if(i % 2 == 0) {
			list = $("<li class='b_videoList'></li>");
		};
		list.append(ele);
		$(".b_videoWrap").append(list);
	}
	//创建视频秀区域元素函数
	function createGift(imageSrc) {
		return $("<div class='b_video'><div class='b_videoImgWrap'><img src=" + imageSrc + " class='b_videoImg' /><span class='b_videoIntro overhidden'>英雄联盟</span><span class='glyphicon glyphicon-play b_videoPlay'></span></div><div class='b_videoWordsWrap'><p class='b_videoWords'>6.1版本单排上分最强打野英雄Tops5排行</p></div></div>")
	};
	//首页主界面  结束

	//*************数据库  开始***************
	//获取数据裤中的关注游戏列表并加载到"我关注的游戏中"
	var localAttGame, Attgame;
	initAttGame();

	function initAttGame() {
		if(localStorage.AttGame != undefined) {
			localAttGame = localStorage.AttGame;
			AttGame = JSON.parse(localAttGame);
			initGameList(AttGame);
		};
	}
	//*************数据库  结束***************

	//创建游戏列表的循环 并给所创建的元素添加点击事件
	function creGameCycle(Arr) {
		for(var i = 0; i < Arr.length; i++) {
			var ele = createRegGameList(Arr[i].src, Arr[i].name, Arr[i].id);
			$(".b_regGameWrap").append(ele);

			//给游戏列表绑定点击事件
			//点击单个游戏列表跳转到单个游戏界面
			$(".b_regGameList").on("touchend", function() {
				//主界面隐藏
				$("#b_con").hide(100);
				//单个游戏界面显示
				$("#b_single").show(100);
				$("#b_wrap").animate({
					left: 0
				}, 300);
				$(".b_navImg").attr("data-bol", "true");
				var name = $(this).find(".b_regGameWord").text();
				var id = $(this).attr("data-id");
				var imgSrc = $(this).find(".b_regGameImg").attr("src");
				singGame(name, imgSrc, id);
			});
		};
	};

	//点击查看更多跳转到单个游戏界面
	$(".b_mainGame .b_btn").on("touchend", function() {
		//主界面隐藏
		$("#b_con").hide(100);
		//单个游戏界面显示
		$("#b_single").show(100);
		var name = $(this).parent().parent().find(".b_font1").text();
		var imgSrc = $(this).parent().parent().find(".b_iconImg").attr("src");
		var id = -1;
		singGame(name, imgSrc, id);
	});

	//往登录界面中的关注游戏列表中追加关注列表
	function createRegGameList(imgSrc, imgName, id) {
		return $("<li class='b_regGameList' data-id=" + id + "><img src=" + imgSrc + " class='b_regGameImg'/><span class='b_regGameWord'>" + imgName + "</span><span class='glyphicon glyphicon-chevron-right'></span></li>")
	};
	//初始化关注列表
	function initGameList(AttGame) {
		var length = AttGame.length;
		//删除之前关注游戏列表
		$(".b_regGameList").remove();
		//创建关注游戏列表
		creGameCycle(AttGame);
		//创建游戏列表的高度动画
		var height = $(".b_regGameList").outerHeight();
		$(".b_regGameList").animate({
			height: height
		}, 300);
		if(length > 5) {
			$(".b_regGameWrap").animate({
				height: height * 5
			}, 300);
			$(".b_regGameWrap").scrollTop($(".b_regGameWrap")[0].scrollHeight);
		} else {
			$(".b_regGameWrap").css("height", height * length + "px");
		};
	};

	//点击添加游戏跳转到关注游戏管理中
	$(".b_regAdd").on("touchend", function() {
		window.location.href = "Aindex02.html";
	});

	//单个游戏界面 开始
	//初始加载单个游戏界面
	function singGame(title, imgSrc, id) {
		$(".b_navWords").text(title);
		$(".b_myShopping").text("取消关注");
		$(".c_avatar>div>img").attr("src", imgSrc);
		$(".b_myShopping").attr("data-id", id);
	};

	//点击关注/取消关注
	$(".b_myShopping").on("touchend", function() {
		var info = $(this).text();

		//***********数据库  开始***********
		if(info == "取消关注") {
			$('.b_myShopping').text("关注");
			var id = $(this).attr("data-id");
			for(var i = 0; i < AttGame.length; i++) {
				if(AttGame[i].id == id) {
					AttGame.splice(i, 1);
					localStorage.AttGame = JSON.stringify(AttGame);
					//重新加载登录界面"我关注的游戏"
					initAttGame();
					return;
				};
			};
		} else {
			$('.b_myShopping').text("取消关注");
			//获取关注游戏的图标路径
			var imgSrc = $(".c_avatar>div>img").attr("src");
			//获取关注游戏的游戏名
			var imgName = $(".b_navWords").text();
			//获取关注游戏的自定义id
			var imgId = $(this).attr("data-id");
			//创建关注游戏信息对象
			var infoObj = {
				src: imgSrc,
				name: imgName,
				id: imgId
			};
			AttGame.push(infoObj);
			localStorage.AttGame = JSON.stringify(AttGame);
			//重新加载登录界面"我关注的游戏"
			initAttGame();
		};
		//***********数据库  结束***********

	});
	$(function() {
		$(".c_gameInfo_head>ul>li").on("touchend", function() {
			$(".c_gameInfo_head>ul>li").css("color", "black");
			$(this).css("color", "red");
			$(".c_line").animate({
				left: $(".c_gameInfo_head>ul>li").eq(0).width() * $(this).index()
			}, 100)
		});
	});

	//单个游戏界面  结束

	//点击单个游戏职业介绍 显示简介
	$(".c_eight_div").on("touchend", function() {
		window.location.href = "AnewPlay.html"
	});
	
	//点击底部导航栏
	$(".b_footerNav").on("touchend", function() {
		console.log($(this).index())
		//		$(".b_footerNav").css("color", "#C0C0C0");
		//		$(this).css("color", "#FE786F");
		switch($(this).index()) {
			case 0:
				window.location.href = "Aindex01.html";
				break;
			case 1:
				window.location.href = "index2.html";
				break;
			case 2:
				window.location.href = "index3.html";
				break;
			case 3:
				window.location.href = "loaded.html";
				break;
			default:
				break;
		}
	})

}